<template>
  <a-tabs v-model:active-key="curtab" size="mini">
    <a-tab-pane v-for="tab in tabCardList" :key="tab.key" :title="tab.name" />
  </a-tabs>
  <!-- 按店铺汇总 -->
  <SalesBoardByShop :searchVal="searchVal" :markedtList="markedtList" :shopList="shopList" v-if="curtab === 1" @toSearch="updateSearchVal" />
  <!-- 按商品汇总 -->
  <SalesBoardBySku :searchVal="searchVal" :markedtList="markedtList" :shopList="shopList" v-if="curtab === 2" @toSearch="updateSearchVal" />
  <!-- 按运营汇总 -->
  <SalesBoardByUser :searchVal="searchVal" v-if="curtab === 3" @toSearch="updateSearchVal" />
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import SalesBoardByShop from './salesBoardByShop.vue'
  import SalesBoardBySku from './salesBoardBySku.vue'
  import SalesBoardByUser from './salesBoardByUser.vue'
  import useBaseDataStore from '@/store/modules/base-data'
  import { getStartAndEndTime } from '@/utils/timeFormat'

  onMounted(() => {
    getMarketList()
    getShopList()
  })

  const tabCardList = [
    { name: '按店铺汇总', key: 1 },
    { name: '按商品汇总', key: 2 },
    { name: '按运营汇总', key: 3 },
  ]
  const searchVal = ref<any>({
    dataType: 'UTC',
    currencyCode: 'USD',
    startDate: getStartAndEndTime('last_30_days')?.[0],
    endDate: getStartAndEndTime('last_30_days')?.[1],
  })
  const useBaseData = useBaseDataStore()
  const markedtList = ref<Array<any>>([])
  const shopList = ref<Array<any>>([])
  const curtab = ref(1)
  // 获取站点
  async function getMarketList() {
    await useBaseData.getMarketList()
    markedtList.value = useBaseData.markedtList
  }
  // 获取店铺
  async function getShopList() {
    await useBaseData.getShopList()
    shopList.value = useBaseData.shopList
  }
  function updateSearchVal(info: any) {
    searchVal.value = info
  }
</script>
<style lang="less" scoped>
  :deep(.arco-tabs-nav-tab) {
    background-color: #fff;
  }
</style>
